{% extends 'layouts/base.html' %}
{% block content %}
<link rel="stylesheet" href="{{config['application']['site']['assetsUri']}}admin/css/jbootstrap-responsive.css" />
<style type="text/css">

    .samelabelwidth{
        width: 85px;
        text-align: right;
    }
    .smallabelwidth{
        width: 47px;
        text-align: right;
    }
    .paddingBottom20{
        padding-bottom: 20px;
    }    
    .help-inline {
        display: inline-block;
        *display: inline;
        padding-left: 5px;
        vertical-align: middle;
        *zoom: 1;
    }
    .form-horizontal .control-group {
        margin-bottom: 20px;
    } 
    @media (min-width: 979px) {
        .row {
            margin-left: -30px;
            *zoom: 1;
        }
        .row:before,
        .row:after {
            display: table;
            line-height: 0;
            content: "";
        }
        .row:after {
            clear: both;
        }
        [class*="span"] {
            float: left;
            min-height: 1px;
            margin-left: 0px;
        }
    }
    .row-fluid{
        overflow: hidden;
    }
</style>
<div class="row " style="margin-right:auto;margin-left:50px; margin-top:20px;">
    <div type="col-xs-12">
        <form action="{{ url('backend/surcharge/index') }}" method="post" class="form-horizontal" id="seting_from" >
            <div class="row-fluid">
                <div class="span3">
                    <div class="control-group">
                        <label class="help-inline">出发楼层：</label>
                        <div class="help-inline">
                            <select class="span12" id="select_type_1">
                                <option value="new">添加楼层</option>
                                {% for v in type1%}
                                    <option value="{{v.scg_price}}">{{v.scg_name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="control-group">
                        <label class="help-inline">楼层名称：</label>
                        <div class="help-inline">
                            <input id="name_type_1" type="text" class="span12" placeholder="请输入楼层名称">
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="control-group">
                        <label class="help-inline">费用：</label>
                        <div class="help-inline">
                            <input id="price_type_1" type="number" class="span12 input-mini" placeholder="0.00">
                        </div>  
                        <span class="">元</span>             
                    </div>
                </div>
                <div class="help-inline  paddingBottom20">
                    <button type="button" class="btn btn-info" id="add_type_1">添加楼层</button>
                </div>
                <div class="help-inline  paddingBottom20">
                    <button type="button" class="btn btn-danger" style="display:none;" id="delete_type_1">删除楼层</button>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span3">
                    <div class="control-group">
                        <label class="help-inline">到达楼层：</label>
                        <div class="help-inline">
                            <select class="span12" id="select_type_2">
                                <option value="new">添加楼层</option>
                                {% for v in type2%}
                                    <option value="{{scg_price}}">{{v.scg_name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="control-group">
                        <label class="help-inline">楼层名称：</label>
                        <div class="help-inline">
                            <input id="name_type_2" type="text" class="span12" placeholder="请输入楼层名称">
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="control-group">
                        <label class="help-inline">费用：</label>
                        <div class="help-inline">
                            <input id="price_type_2" type="number" class="span12 input-mini" placeholder="0.00">
                        </div>  
                        <span class="">元</span>             
                    </div>
                </div>
                <div class="help-inline  paddingBottom20">
                    <button type="button" class="btn btn-info" id="add_type_2">添加楼层</button>
                </div>
                <div class="help-inline  paddingBottom20">
                    <button type="button" class="btn btn-danger" style="display:none;" id="delete_type_2">删除楼层</button>
                </div>
            </div>
            <div class="row-fluid paddingBottom20"> 
                <button type="button" class="btn btn-info help-inline" id="addnew">添加</button><label class="help-inline">(注：点击添加自定义附加费）</label>
            </div>
         
            {% for v in type0%}
            <div id="surcharge">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="control-group">
                            <label class="samelabelwidth help-inline">附加费名称：</label>
                            <div class="help-inline">
                                <input type="text" class="span12" placeholder="列：里程费" name="type0_name[]" value="{{v.scg_name}}">
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="row-fluid">
                    <div class="span12">
                        <div class="control-group">
                            <label class="samelabelwidth help-inline">价格：</label>
                            <div class="help-inline">
                                <input type="number" class="span12 input-mini" placeholder="1:00" name="type0_price[]" value="{{v.scg_price}}">
                            </div>
                            <span class="">元</span>
                        </div>
                    </div>
                </div> 
                <div class="row-fluid">
                    <div class="span12">
                        <div class="control-group">
                            <label class="samelabelwidth help-inline">默认值：</label>
                            <div class="help-inline">
                                <input type="text" class="span12 input-mini" placeholder="10" name="type0_default_value[]" value="{{v.default_value}}">
                            </div>
                            <div class="help-inline"> 
                                <label class="smallabelwidth help-inline">单位：</label> 
                                <div class="help-inline">                               
                                    <input type="text" class="span12 input-mini" placeholder="列：公里" name="type0_unit[]" value="{{v.unit}}">
                                </div>
                            </div>                        
                        </div>
                    </div>                
                </div> 
                <div class="row-fluid">
                    <div class="span12">
                        <div class="control-group">
                            <label class="samelabelwidth help-inline">说明：</label>
                            <div class="help-inline">
                                <textarea class="form-control" rows="2" placeholder="列：10公里内免费（每超1公里加收5元" name="type0_desciption[]">{{v.desciption}}</textarea>
                            </div>
                            <button type="button" class="btn btn-danger" but="delete" >删除</button>
                        </div>
                    </div>
                </div>
            </div>
            {%endfor%}
        </form>
        <button type="button" class="btn btn-info col-xs-offset-2" id="seting">设置</button>
    </div>    
</div>


<!-- inline scripts related to this page -->
{% endblock %}
{% block script %}

<script type="text/javascript">
    $(document).ready(function () {
        
        //1表示出发楼层，2表示到达楼层
        var setFloor = function(type){
            var select = $("#select_type_"+type);
            var price = $("#price_type_"+type);
            var name = $("#name_type_"+type);
            var add = $("#add_type_"+type);
            var del = $("#delete_type_"+type);
            
            select.change(function(){
                if($(this).val() == 'new'){
                    price.val('');
                    name.val('');
                    add.text('添加楼层');
                    del.hide();
                }else{
                    price.val($(this).val());
                    name.val($(this).find('option:selected').text());
                    add.text('修改楼层');
                    del.show();
                }           
                
            });
            
            add.click(function(){               
                if(select.val() == 'new'){
                    if(name.val() == false){
                        alert('楼层名称不能为空');return;
                    }
                    
                    if(price.val() == false){
                        var tmp_price = '0';
                    }else{
                        var tmp_price = price.val();
                    }
                    
                    select.append('<option value="'+tmp_price+'">'+name.val()+'</option>');
                    name.val('');
                    price.val('');
                    alert('已添加');
                }else{
                    select.find('option:selected').val(price.val()).text(name.val());
                    alert('已修改');
                }
            });
            
            del.click(function(){            
                select.find('option:selected').remove();
                var option = select.find('option:selected');
                alert('已删除');
                if(option.val() == 'new'){
                    price.val('');
                    name.val('');
                    add.text('添加楼层');
                    $(this).hide();return
                }else{
                    price.val(option.val());
                    name.val(option.text());
                }
            });
        };
        
        setFloor(1);
        setFloor(2);
        
        var list_delete = $("button[but='delete']");
        list_delete.eq(0).hide();
        var list_event = function(){
            list_delete.click(function(){
                $(this).parents('div[id="surcharge"]').remove();
            });
        } 
        
        $("#addnew").click(function(){
            var brother = $("#surcharge").clone();
            brother.find("button[but='delete']").show().click(function(){
                brother.remove();
            });
            $("#seting_from").append(brother);

        });
        
        list_event();
        
        var create_input = function(type){
            var option = $("#select_type_"+type+" > option");
            var str = '';
            option.each(function(){
                if($(this).val() !== 'new'){
                    str += '<input type="hidden" name="type'+type+'_name[]" value="'+$(this).text()+'">';
                    str +='<input type="hidden" name="type'+type+'_price[]" value="'+$(this).val()+'">';
                }
            });
               
            $("#seting_from").append(str);
        };
        
        $("#seting").click(function(){
            create_input(1);
            create_input(2);
            $("#seting_from").submit();
        });
        
        //0表示其他，1表示出发楼层，2表示到达楼层
//        var setfFloor = function (event, type, data) {
//            $.ajax({
//                url: "{{ url('backend/surcharge/setFloor') }}",
//                type: "POST",
//                data: "name=John&location=Boston",
//                success: function (html) {
//                    $("#results").append(html);
//                }
//            });
//        }

    });
</script>
{% endblock %}